<template>
  <div>
    <el-upload
      :file-list="imageCoverList"
      :on-success="formatCoverData"
      :on-error="handleUploadError"
      :on-remove="handleRemoveCover"
      :on-preview="handlePictureCardPreview"
      :before-upload="beforeIconUpload"
      :action="fileUploadUrl"
      list-type="text"
      :limit="limitCount"
    >
      <el-button type="primary" :title="'限制' + limitCount"
        >上传视频</el-button
      >
      <div slot="tip" style="color: #cacdd4; fontsize: 12px">
        {{ distinguishabilityText }}
      </div>
    </el-upload>
    <!-- ?? -->
    <el-dialog
      :visible.sync="isShowDialogs"
      width="45%"
      @close="isShowDialogs = false"
      append-to-body
    >
      <video :src="previewUrl" controls="controls"></video>
      <!-- <video :src="'http://member-center.s3.cn-east-2.jdcloud-oss.com/0000/2c1/video/54f501e6-1e94-4891-80c6-6e751de3f9be.png'" controls="controls"></video> -->
    </el-dialog>
  </div>
</template>
<script>
import { VIDEO_UPLOAD_URL } from "@/utils/uploadURL";
import message from "@/mixins/message";
import TimingDialog from "@/components/Timing-dialog";
import { mapActions } from "vuex";
export default {
  components: {
    TimingDialog,
  },
  mixins: [message],
  props: {
    distinguishabilityText: {
      // 描述文字
      type: String,
      default: "",
    },
    index: {
      // 序号，多个上传组件同时使用时，用于区分位置
      type: Number,
      default: 0,
    },
    imageCoverList: {
      type: Array,
      default: () => [],
    },
    limitCount: {
      // 限制上传个数
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      fileUploadUrl: VIDEO_UPLOAD_URL,
      previewUrl: "",
      isShowDialogs: false,
    };
  },
  methods: {
    /**
     * 图片上传成功的回调
     */
    formatCoverData(response, file, fileList) {
      // console.log(">>", response, fileList);
      if (response.message === "SUCCESS") {
        var list = fileList.map((item) => {
          if (item.url) return item;
          // if (item.url)
          return {
            name: item.name,
            url: item.response.data,
          };
        });
        // console.log(list,"list")
        this.$emit("change", list, this.limitCount);
      } else if (response.code === 20011) {
        this.message("登录超时，请重新登录", "error");
        this.FedLogOut().then(() => {
          window.location.reload(); // 为了重新实例化vue-router对象 避免bug
        });
      } else {
        this.message("上传失败，请重新上传", "error");
      }
    },
    /**
     * 手动删除会员等级图片
     */
    handleRemoveCover(file, fileList) {
      if (this.limitCount === 1) {
        this.$emit("onHandleRemoveCover", this.index);
      } else {
        this.$emit("onHandleRemoveCover", fileList);
      }
    },
    /**
     * 图片上传失败的钩子
     */
    handleUploadError() {
      this.message("上传失败，请重新上传", "error");
    },
    /* 点击预览 */
    handlePictureCardPreview(file) {
      console.log(file)
      this.previewUrl = file.url;
      // this.previewUrl = file.name;
      this.isShowDialogs = true;
    },
    beforeIconUpload(file) {
      const isPrescriptiveFormat = file.type === 'video/mp4'
      if (!isPrescriptiveFormat) {
        this.message('只能上传 video 或 mp4 格式的视频', 'error')
      }
      return isPrescriptiveFormat
    },
    ...mapActions(["FedLogOut"]),
  },
};
</script>
<style lang="scss" scoped>
.el-dialog.upload-preview-dialog {
  background: red;
}
.add-btn {
  width: 100px;
  height: 100px;
  line-height: 100px;
  border: 1px solid #eee;
  border-radius: 10px;
}
video {
  width: 100%;
}
</style>
